
<template>
  <div class="headreg">
    <van-nav-bar left-arrow @click-left="go">
      <template #title
        ><span style="color: #fff">注册</span>
        /
        <router-link to="/login">
          <span style="color: #c8c9cc">登录</span></router-link
        >
      </template></van-nav-bar
    >
    <van-field
      v-model="username"
      clearable
      left-icon="phone-o"
      placeholder="请输入手机号"
    />
    <van-field
      v-model="vercode"
      center
      clearable
      left-icon="music-o"
      placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button
          v-if="!cutDownTime"
          size="mini"
          round
          type="primary"
          color="#ededed"
          @click="sendSMSCode"
          >发送验证码</van-button
        >
        <van-button
          v-if="cutDownTime"
          size="mini"
          round
          type="primary"
          color="#ededed"
          >{{ cutDownTime }}s后再试</van-button
        >
      </template>
    </van-field>
    <van-field
      v-model="password"
      clearable
      left-icon="phone-o"
      placeholder="请输入密码"
    />
    <div class="foot">
      <van-button size="normal" type="primary" block @click="register"
        >注册</van-button
      >
    </div>
  </div>
</template>
<script>
// import { getCateList } from "@/api/login";
import { Field, Toast } from "vant";
import { Button } from "vant";
export default {
  data() {
    return {
      user: [],
      show: true,
      username: "",
      vercode: "",
      password: "",
    };
  },

  components: {
    [Field.name]: Field,
    [Button.name]: Button,
  },
  mounted() {},
  methods: {
    go() {
      this.$router.go(-1);
    },
    register() {
      if (this.username == "") {
        Toast({
          message: "手机号不能为空",
          position: "top",
          duration: 3000,
        });
        return;
      }
      if (this.vercode == "") {
        Toast({
          message: "验证码不能为空",
          position: "top",
          duration: 3000,
        });
        return;
      }
      if (this.password == "") {
        Toast({
          message: "密码不能为空",
          position: "top",
          duration: 3000,
        });
        return;
      }
      this.$http
        .post("/user/reg", {
          UserName: this.username,
          VerCode: this.vercode,
          Password: this.password,
        })
        .then((result) => {
          console.log(result);
          Toast({
            message: "注册成功！",
            position: "top",
            duration: 3000,
          });
          this.$router.push("login");
        })
        .catch((err) => {
          if (err.response.status == 409) {
            Toast({
              message: "该用户已经注册",
              position: "top",
              duration: 3000,
            });
            return;
          }
          if (err.response.status == 404) {
            Toast({
              message: "网络请求失败，请稍后再试",
              position: "top",
              duration: 3000,
            });
            return;
          }
          console.log(err.response.status);
        });
    },

    async sendSMSCode() {
      let pattern = /^[1][3,4,5,7,8][0-9]$/g;
      if ((this.telnumber.length != 11) | !pattern.test(this.telnumber))
        return this.$toast("请输入正确的手机号");
    },
    // let res =await ajax.sendSMSCode(this.telnumber);this.cutDownTime=60;
    //   let timer=setInterval(()=>{
    // this.cutDownTime--;
    // if(this.cutDownTime<=0){
    //   this.cutDownTime=''
    // }
    //   },1000),

    sendSMSCode(telnumber) {
      return axios.post(Url.sendSMSCodeApi, { telnumber });
    },
  },
};
</script>
<style lang="less">
.headreg {
  .foot {
    margin-top: 26px;
    padding-left: 17px;
  }
}
.van-button--block {
  width: 95%;
}
</style>